/* Link styling */



.area-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 32px;
    position: absolute;
    width: auto; /* Adjust as needed, or use specific widths in individual classes */
    height: 27px;
    line-height: 27px;
    text-align: center;
    text-decoration: none;
    color: #002b48; /* Default text color */
    background-color: transparent; /* Default background color */
    transition: color 0.2s, font-size 0.2s; /* Smooth transition for hover effects */
}

/* Hover effect */
.area-link:hover {
    color: #ca59a7;
    font-size: 35px;/* Text color on hover */
}

/* Link styling */
.default-crke {


    font-family: 'Montserrat', sans-serif;

    font-size: 24px;



    width: auto; /* Adjust as needed, or use specific widths in individual classes */
    height: 27px;
    line-height: 35px;
    text-align: justify;
    text-decoration: none;
    color: #002b48; /* Default text color */
    background-color: transparent; /* Default background color */
    transition: color 0.2s, font-size 0.2s; /* Smooth transition for hover effects */
}

    .naslov-crke {
        font-family: 'Montserrat', sans-serif;
        font-weight: bold; /* Makes the text bold */
        font-size: 50px;

        width: auto; /* Adjust as needed, or use specific widths in individual classes */
        height: 27px;
        line-height: 27px;
        text-align: center;
        text-decoration: none;
        color: #002b48; /* Default text color */
        background-color: transparent; /* Default background color */
        transition: color 0.2s, font-size 0.2s; /* Smooth transition for hover effects */
    }


/* Link styling */
.tense-buddy {

    @font-face {
        font-family: 'MyCustomFont';
        src: url('Kje_files/inkfree.ttf') format('ttf');
    }

    font-family: 'Ink Free', cursive;
    font-weight: bold; /* Makes the text bold */
    font-size: 35px;
    position: absolute;
    width: auto; /* Adjust as needed, or use specific widths in individual classes */
    height: 27px;
    line-height: 27px;
    text-align: center;
    text-decoration: none;
    color: #002b48; /* Default text color */
    background-color: transparent; /* Default background color */
    transition: color 0.2s, font-size 0.2s; /* Smooth transition for hover effects */
    animation: flashingColors 0.333s infinite, pulsing 0.333s infinite;
}

@keyframes flashingColors {
    0% { color: #0000ff; }
    50% { color: #a515cc; }
    100% { color: #0000ff; }
}

@keyframes pulsing {
    0% { transform: scale(1.5); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.5); }
}

.tense-buddy:hover {
    color: #ca59a7;
    font-size: 40px;/* Text color on hover */
}

    .image-zoom {
        transition: transform 0.3s ease; /* Smooth transition for the transform */
        cursor: pointer; /* Changes the cursor to a pointer */
        border-radius: 7px;
    }

    .image-zoom:hover {
        transform: scale(1.25); /* Increases the image size by 25% */
    }